<template>
	<view class="wrap">
		<js-error mode="top" ref="jsError" z-index="999"></js-error>
		<view class="search cu-bar">
			<u-search v-model="barCode" ref="uSearch" :focus="focus" placeholder="请先聚焦在扫描产品条码" :show-action="false"
				@custom="search" @search="search"></u-search>
			<view style="margin-left:10px;display: flex;flex-direction: column;">
				<u-button size="medium" @click="empty" type="error"
					style="width: 60px;height: 25px;color: #fff;font-size: 16px;">清 空
				</u-button>
			</view>

		</view>
		<view style="margin: 10px;">
			<u-button size="medium" @click="()=>{ckshow = true;model={...cWhData}}" type="primary" style="width: 40px;height: 30px;color: #fff;">
				所在仓库
			</u-button>
			<text style="margin-left: 10px;color: red;">{{cWhData.cWhName}}</text>
		</view>
		<view style="padding: 0px 10px;">
			<!-- <u-form-item label="所在仓库：" prop="testCarVen" label-width="150" required>
				<js-select v-model="cWhData.cWhCode" :items="carVenSelectList" placeholder="请选择仓库" :tree="false"
					:label-value="cWhData.cWhName" @label-input="cWhData.cWhName = $event" @confirm="selectConfirm">
				</js-select>
			</u-form-item> -->
			<view style="margin-top: 5px;">物料编码: {{list.length?list[0].cInvCode:''}}</view>
			<view style="margin-top: 5px;">物料名称: {{list.length?list[0].cInvName:''}}</view>
			<view style="margin-top: 5px;">物料规格: {{list.length?list[0].cInvStd:''}}</view>
			<view style="margin-top: 5px;">物料图号: {{list.length?list[0].cInvAddCode:''}}</view>
		</view>
		<view style="margin:0px 5px 10px;">
			<u-table>
				<u-tr>
					<u-th width="150px">批次</u-th>
					<u-th width="50px">数量</u-th>
					<u-th>调整前货位</u-th>
					<u-th>调整后货位</u-th>
				</u-tr>
				<view style=" height: 38vh;overflow: scroll;">
					<!-- @click='detailsTr(item)' -->
					<view v-for="(item,index) in list" :key='index' :style="{backgroundColor: '#81b337'}">
						<u-swipe-action @click="click(item,index)" :index="index" :options="options"
							:bg-color="'#81b337'">
							<u-tr v-if="list.length">
								<u-td width="150px"> {{item.cBatch}}</u-td>
								<u-td width="50px">{{item.iQuantity}}</u-td>
								<u-td>{{item.cPosName}}</u-td>
								<u-td>{{item.cPosNameAfter}}</u-td>
							</u-tr>
						</u-swipe-action>
					</view>
					<u-empty v-if="!list.length" text="暂无数据" mode="data"></u-empty>
				</view>

			</u-table>
		</view>
		<view style="margin-left: 5px;font-size: 18px;">
			<view>
				总扫描箱数：<text style="color: #878700;padding-right: 10px;font-size: 24px;">{{cases}}</text> 箱
			</view>
			<view>
				总扫描数量：<text style="color: #878700;padding-right: 10px;font-size: 24px;">{{pieces}}</text> 件
			</view>
			<view style='text-align: right;position: relative;top: -30px;right: 10px;'>
				<u-button size="mini" @click="out('2')" type="primary"
					style="width: 120px;height: 30px;color: #fff;font-size: 16px;">调出货位扫描
				</u-button>
			</view>
			<view>
				<u-button size="mini" @click="submit" type="primary"
					style="width: 98%;height: 30px;color: #fff;font-size: 16px;">提交
				</u-button>
			</view>

		</view>
		<u-popup v-model="groundShow" mode="center" width="80%" height="20%" :closeable="true" border-radius="14">
			<view
				style="height: 100%; padding: 10px;font-size: 16px; display: flex;flex-direction: column;  justify-content: center;">
				<view>
					{{enterFlag == '1'?'调出货位扫描:':'调入货位扫描：'}}
				</view>
				<u-search v-model="cPosCode" :placeholder="enterFlag == '1'?'请扫描调出货位码':'请扫描调入货位码'" :show-action="false"
					@custom="cPoSearch" @search="cPoSearch" :focus="hwfocus"></u-search>
			</view>
		</u-popup>
		
		<u-popup v-model="ckshow" mode="bottom" height="60%" :closeable='true'>
			<view style="padding: 10px;font-size: 18px;">
				请先选择仓库：
			</view>
			<view>
				<u-form class="form bg-white" :model="model" ref="uForm" label-position="left">
					<u-form-item label="" prop="testCarVen" label-width="200" required
						:label-style="{'font-weight':'bold'}">
						<js-select v-model="model.cWhCode" :items="carVenSelectList" placeholder="请选择仓库" :tree="false"
							:label-value="model.cWhName" @label-input="model.cWhName = $event">
						</js-select>
		
					</u-form-item>
				</u-form>
				<view style="padding: 10px;height: 100px;">
					<u-button size="mini" style="margin: 0 10px 10px 0;" @click="ckSelect(item)" v-for="(item,index) in this.vuex_vague4"
						:key="index">{{item.cWhName}}</u-button>
				</view>
				<view style="position: relative;bottom: -160px; padding: 0 10px;">
					<u-button type="primary" @click="selectConfirm">确定选择</u-button>
				</view>
			</view>
		
		</u-popup>


	</view>
</template>

<script>
	import {
			mapState
		} from 'vuex';
	export default {
		data() {
			return {
				model: {
					cWhCode: '',
					cWhName: '',
				},
				carVenSelectList: [],
				enterFlag: '1',
				hwfocus: true,
				focus: true,
				cases: 0,
				pieces: 0,
				cWhData: {},
				form: {},
				groundShow: false,
				show: false,
				ckshow: false,
				barCode: '',
				cPosCode: '',
				list: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				cWhData: {},
				carVenSelectList: [],
			}
		},
		computed: {
			...mapState(['vuex_vague4'])
		},
		onShow() {},
		onLoad(params) {
			this.cWhData = JSON.parse(params.cWhData)
			this.$store.commit("modifyHwtz", this.cWhData)

			// this.model = this.cWhData
			this.$u.api.tm.getWarehouse({
					cWhCode: '',
					cWhType: this.cWhData.cWhType
				})
				.then(res => {
					if (res.statecode == '1') {
						this.carVenSelectList = res.subdata.map(item => {
							item.name = item.cWhName;
							item.value = item.cWhCode;
							return item
						})

					} else {
						this.$u.toast(res.message);
					}
				});
		},
		methods: {
			ckSelect(item){
				this.model = item
			},
			//下拉
			selectConfirm() {
				this.ckshow = false;
				this.carVenSelectList.forEach(item => {
					if (this.model.cWhCode == item.cWhCode) {
						this.cWhData = {
							...this.cWhData,
							...item
						};
					}
				})
				this.$store.commit("modifyHwtz", this.cWhData)
				this.empty()
				let flag = true
				this.vuex_vague4.forEach(item=>{
					if(this.cWhData.cWhCode == item.cWhCode ){
						flag = false;
					}
				})
				if(flag){
					this.vuex_vague4.unshift(this.cWhData)
					let arr = [...this.vuex_vague4]
					this.$store.commit("modifyVague4",arr.splice(0,5))
				}
			},

			// 调入调出
			out(type) {
				this.cPosCode = '';
				this.enterFlag = type
				this.focus = false;
				if (this.list.length) {
					this.groundShow = true;
					this.hwfocus = true;
					// let flag = false;
					// this.list.forEach(item => {
					// 	if (item.flag == '1') {
					// 		flag = true
					// 	}
					// })
					// if (flag) {
					// 	this.groundShow = true;
					// } else {
					// 	this.$u.toast('请重新扫描条码')
					// }
				} else {
					this.$u.toast('请先扫描条码')
					setTimeout(() => {
						this.focus = true;
					}, 500)
				}
			},
			// 清空
			empty() {
				this.barCode = '';
				this.cases = 0;
				this.pieces = 0;
				this.list = [];
				this.focus = false;
				setTimeout(() => {
					this.focus = true;
				}, 500)
			},
			// 箱码获取数据
			loadList(BarCode) {
				var _this = this;
				_this.focus = false;
				this.$u.api.tm.getBarCode({
					BarCode,
					cWhCode: this.cWhData.cWhCode,
				}).then(res => {
					if (res.statecode == '1') {
						if (res.subdata.length) {
							if (!this.cases) {
								this.list.push(res.subdata[0])
								let num = 0;
								this.list.forEach(item => {
									num += item.iQuantity;
								})
								this.cases++;
								this.pieces = num
								// this.barCode = '';
							} else {
								let istrue = true;
								if (this.list[0].cInvCode == res.subdata[0].cInvCode) {
									this.list.push(res.subdata[0])
									let num = 0;
									this.list.forEach(item => {
										num += item.iQuantity;
									})
									this.cases++;
									this.pieces = num
								} else {
									uni.showModal({
										title: '提示',
										content: '该物料编码不相同，如需处理其他请先清空表格数据',
										showCancel: false,
										success: function() {
											setTimeout(() => {
												_this.focus = true;
											}, 500)
										}
									});
								}

							}

						} else {
							this.$u.toast('该条码暂无数据');
						}

					} else {
						this.$u.toast(res.message);
					}
					setTimeout(() => {
						_this.barCode = '';
						_this.focus = true;
					}, 500)
				})

			},

			// 货位搜索
			cPoSearch(cPosCode) {
				this.hwfocus = false;
				this.$u.api.tm.getPosition({
					cWhCode: this.cWhData.cWhCode,
					cPosCode
				}).then(res => {
					if (res.statecode == '1') {
						let newArr = this.list.map(item => {
							if (!item.cPosNameAfter) {
								item.cPosCodeAfter = res.subdata.cPosCode
								item.cPosNameAfter = res.subdata.cPosName
							}
							return item
						})
						this.list = newArr
						this.groundShow = false;
						this.cPosCode = ''
						setTimeout(() => {
							this.barCode = '';
							this.focus = true;
						}, 500)
					} else {
						this.cPosCode = ''
						this.$u.toast(res.message);
						setTimeout(() => {
							this.cPosCode = '';
							this.barCode = '';
							this.hwfocus = true;
						}, 500)
					}

				})
			},
			// 箱码搜索
			search(value) {
				// this.barCode = '';
				let _this = this;
				_this.focus = false;
				let str = value.slice(0, 3)
				if (str == '|Rd') {
					this.barSearch(value)
				} else if (str == '||K') {
					if (this.list.length) {
						this.cPoSearch(value)
					} else {
						this.$u.toast('请先扫描条码')
						setTimeout(() => {
							_this.barCode = '';
							_this.focus = true;
						}, 500)
					}
				} else {
					this.$u.toast('条码格式错误');
					setTimeout(() => {
						_this.barCode = '';
						_this.focus = true;
						// _this.searchfocus()
					}, 500);
				}

			},
			barSearch(value){
				let _this = this;
				if (!this.list.length) {
					this.loadList(value);
				} else {
					let batchFlag = true
					this.list.forEach(item => {
						if (item.BarCode == value) {
							batchFlag = false
						}
					})
					if (batchFlag) {
						this.loadList(value);
					} else {
						this.$u.toast('请勿重复扫描');
						setTimeout(() => {
							_this.barCode = '';
							_this.focus = true;
						}, 500)
					}
				}
			},
			// 入库
			submit() {
				let _this = this
				_this.focus = false
				if (!this.list.length) {
					this.$u.toast('请先扫描产品条码');
					// this.$refs.jsError.showError('', '请先扫描产品条码', 'info');
				} else {
					let rkFlag = true;
					this.list.forEach(item => {
						if (!item.cPosCodeAfter || !item.cPosNameAfter) {
							rkFlag = false
						}
					})
					if (rkFlag) {
						let newArr = this.list.map(item => {
							let obj = {
								// "cMaker": this.$store.state.vuex_subdata.UserName,
								"BarCode": item.BarCode,
								"cWhCode": this.cWhData.cWhCode,
								"iQuantity": item.iQuantity,
								"cAPosCode": item.cPosCodeAfter,
								"cMaker": this.vuex_subdata.UserName,
							}
							return obj
						})

						this.$u.api.tm.setAdjustPVouchAdd(newArr).then(res => {
							if (res.statecode == '1') {
								this.$u.toast(res.message);
								// this.$refs.jsError.showError('', res.message, 'info');
								this.cases = 0;
								this.pieces = 0;
								this.list = []

							} else {
								// this.$u.toast(res.message);
								this.$refs.jsError.showError('', res.message, 'info');
							}
							setTimeout(() => {
								_this.focus = true;
							}, 500)

						})

						console.log(newArr)
					} else {
						this.$u.toast('请先全部添加调整后货位在提交');
						// this.$refs.jsError.showError('', '请先全部添加调整后货位在提交', 'error');
					}

				}
				setTimeout(() => {
					_this.focus = true;
				}, 500)
			},

			// 删除单个货位
			click(item, index) {

				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否删除本条数据',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							_this.list.splice(index, 1);
							_this.cases = _this.cases - 1;
							_this.pieces = _this.pieces - item.iQuantity
							let newArr = [..._this.list]
							_this.list = []
							setTimeout(() => {
								_this.list = newArr
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				});
			},

		}
	}
</script>

<style>
	@import '../tm.css';
</style>